<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>表单</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css" rel="stylesheet">
h3 {
	background-color: lightblue;
	color: white;
}
.req-label {
	font-weight: bold;
}
.warning {
	color: red;
	font-weight: bold;
}
.error-message {
	font-style: italic;
}
.overlabel {
	position: absolute;
}
.overlabel label {
	position: absolute;
	top: 6px;
	left: 3px;
	color: #999;
	cursor: text;
}
  </style>
  <script src="../jquery-1.8.2.js"></script>
  <script>
/**
 * by yxz update 2012-11-16
 *
 *
 *
 *
 */
$().ready(function() {
	$('legend').each(function(index) {
		$(this).replaceWith('<h3>' + $(this).text() + '</h3>');
	});
	var requiredFlag = ' * ';
	var conditionalFlag = ' ** ';
	var requiredKey = $('input.required:first').next('span').text();
	var conditionalKey = $('input.conditional:first').next('span').text();
	requiredKey = requiredFlag + requiredKey.replace(/^{(.+)}$/, '$1');
	conditionalKey = conditionalFlag + conditionalKey.replace(/^{(.+)}$/, '$1');
	//console.log($('fieldset :input'));return;
	$('fieldset :input')
		.filter('.required')
			.next('span').text(requiredFlag).end()
			.prev('label').addClass('req-label').end()
		.end()
		.filter('.conditional')
			.next('span').text(conditionalFlag);
	$('<p></p>').addClass('field-keys').append(requiredKey + '<br />').append(conditionalKey).insertBefore('fieldset');
	$('input.conditional').next('span').andSelf().hide().end().end()
	.each(function() {
		var $thisInput = $(this);
		var $thisFlag = $thisInput.next('span');
		$thisInput.prev('label').find(':checkbox').attr('checked', false).click(function() {
			if (this.checked)
			{
				$thisInput.show().addClass('required');
				$thisFlag.show();
				$(this).parent('label').addClass('req-label');
			}
			else
			{
				$thisInput.hide().removeClass('required').blur();
				$thisFlag.hide();
				$(this).parent('label').removeClass('req-label');
			}
		});
		
	});
	$('fieldset :input').blur(function() {
		$(this).parents('li:first').removeClass('warning').find('span.error-message').remove();
		if ($(this).hasClass('required'))
		{
			var $listItem = $(this).parents('li:first');
			if (this.value == '')
			{
				var errorMessage = 'This is a required field.';
				if ($(this).hasClass('conditional'))
				{
					errorMessage += ', when its related checkbox is checked.';
				}
				$('<span></span>').addClass('error-message').text(errorMessage).appendTo($listItem);
				$listItem.addClass('warning');
			}
		}
		if (this.id == 'email')
		{
			var listItem = $(this).parents('li:first');
			if ($(this).is(':hidden'))
			{
				this.value == '';
			}
			if (this.value != '' && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))
			{
				var errorMessage = 'Please use proper e-mail format' + ' (e.g. yxz_blue@126.com)';
				$('<span></span>').addClass('error-message').text(errorMessage).appendTo($listItem);
				$listItem.addClass('warning');
			}
		}
	});

	// 最终检查：通过 submit() 事件处理程序，可以在所有必填字段上触发 blur 事件
	$('form').submit(function() {
		$('#submit-message').remove();
		$(':input.required').trigger('blur');
		var numWarnings = $('.warning', this).length;
		if (numWarnings)
		{
			var list = [];
			$('.warning label').each(function() {
				list.push($(this).text());
			});
			$('<div></div>')
			.attr({id: 'submit-message', 'class': 'warning'})
			.append('Please correct errors with ' + numWarnings + ' fields:<br />')
			.append('&bull; ' + list.join('<br >&bull; ')).insertBefore('#send');
			return false;
		}
	});
	
	// 全选，全不选
	$('<li></li>')
	.html('<label><input type="checkbox" id="discover-all" />' + ' <em>check all</em></label>')
	.prependTo('li.discover > ul');
	$('#discover-all').click(function() {
		var $checkboxes = $(this).parents('ul:first').find(':checkbox');
		if (this.checked)
		{
			$(this).next().text(' un-check all');
			$checkboxes.attr('checked', true);
		}
		else
		{
			$(this).next().text(' check all');
			$checkboxes.attr('checked', false);
		}
	});

	// 字段的占位符文本
	var $search = $('#search').addClass('overlabel');
	var $searchInput = $search.find('input');
	var $searchLabel = $search.find('label');
	if ($searchInput.val())
	{
		$searchLabel.hide();
	}
	$searchInput.focus(function() {
		$searchLabel.hide();
	}).blur(function() {
		if (this.value == '')
		{
			$searchLabel.show();
		}
	});
	var $autocomplete = $('<ul class="autocomplete"></ul>').hide().insertAfter('#search-text');
	alert(1);
	$('#search-text').attr('autocomplete', 'off').keyup(function() {
		$('input').css('background-color', '#D6D6FF');
		$.ajax({
			'url': '',
			'data': {'search-text': $('#search-text').val()},
			'dataType': 'json',
			'type': 'get',
			'success': function(data) {
				if (data.length)
				{
					$autocomplete.empty();
					$.each(data, function(index, term) {
						$('<li></li>').text(term).appendTo($autocomplete).click(function() {
							$('#search-text').val(term);
							$autocomplete.hide();
						});
					});
					$autocomplete.show();
				}
			}
		});
	});
});
  </script>
 </head>

 <body>
  <fieldset>
   <form>
   <legend>Personal Info</legend>
   <ol>
    <li>
	 <label for="first-name">First Name</label>
	 <input class="required" type="text" name="first-name" id="first-name" />
	 <span>{required}</span>
	</li>
	<li>
	 <label for="last-name">Last Name</label>
	 <input class="required" type="text" name="last-name" id="last-name" />
	 <span>{required}</span>
	</li>
	<li>
	 How would you like to be contacted?(choose at least one method)
	 <ul>
	  <li>
	   <label for="by-email"><input type="checkbox" name="by-contact-type" value="E-mail" id="by-email" />by E-mail</label>
	   <input class="conditional" type="text" name="email" id="email" /><span>{required when corresponding checkbox checked}</span>
	  </li>
	  <li>
	   <label for="by-phone"><input type="checkbox" name="by-contact-type" value="Phone" id="by-phone" />by Phone</label>
	   <input class="conditional" type="text" name="phone" id="phone" /><span>{required when corresponding checkbox checked}</span>
	  </li>
	  <li>
	   <label for="by-fax"><input type="checkbox" name="by-contact-type" value="Fax" id="by-fax" />by Fax</label>
	   <input class="conditional" type="text" name="fax" id="fax" /><span>{required when corresponding checkbox checked}</span>
	  </li>
	 </ul>
	</li>
	<li class="discover">
	   How did you discover us?(Checke all that apply)
	   <ul>
	    <li>
		 <label for="magzine"><input type="checkbox" name="discover" id="magzine" />Magzine</label>
		</li>
		<li>
		 <label for="website"><input type="checkbox" name="discover" id="website" />Website</label>
		</li>
		<li>
		 <label for="television"><input type="checkbox" name="discover" id="television" />Television</label>
		</li>
		<li>
		 <label for="movie"><input type="checkbox" name="discover" id="movie" />Movie</label>
		</li>
		<li>
		 <label for="school"><input type="checkbox" name="discover" id="school" />School</label>
		</li>
		<li>
		 <label for="mom"><input type="checkbox" name="discover" id="mom" />Mom</label>
		</li>
		<li>
		 <label for="billboard"><input type="checkbox" name="discover" id="billboard" />Billboard</label>
		</li>
		<li>
		 <label for="graffiti"><input type="checkbox" name="discover" id="graffiti" />Graffiti</label>
		</li>
		<li>
		 <label for="detritus"><input type="checkbox" name="discover" id="detritus" />Detritus</label>
		</li>
		<li>
		 <label for="hatemall"><input type="checkbox" name="discover" id="hatemall" />Hate Mall</label>
		</li>
	   </ul>
	</li>
   </ol>
   <input type="submit" id="send" value="Submit" />
   </form>
  </fieldset>
  <form id="search" action="#" method="get">
   <label for="search-text">search the site</label>
   <input type="text" name="search-text" id="search-text" />
  </form>
 </body>
</html>
